<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全屏</title>
	<style>
	  /* 伪类的使用参考这里 */
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen */
	  img {
		  width: 100px;
		}
		:-webkit-full-screen {
		  width: auto;
		}
		:-moz-full-screen {
		  width: auto;
		}
		:-ms-fullscreen {
		  width: auto;
		}
		:fullscreen {
		  width: auto;
		}
		img::backdrop {
		  background: red;
		}
	</style>
	<script src="./screenfull.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
  <div id="app">
	  <button v-on:click="fullscreen(null)">fullscreen(you may toggle)</button>
		<img src="https://assets-cdn.github.com/pinned-octocat.svg" alt="github svg" style="display:block;"
		  @click="fullscreen($event.target)">
	  <ol>
	  	<li v-for="li in lis">{{li}}</li>
	  </ol>
	</div>
	<!-- allowfullscreen -->
	<iframe src="orientation.html" frameborder="0" id="iframe" ></iframe>
  <script>
	  var list = []
		
		for(i = 0; i < 200; i++) {
		  list.push('li ')
		}

	  new Vue({
		  el: '#app',
			data: {
			  lis: list
			},
			methods: {
			// 每次都调用, 如果缓存, 请使用computed
			  fullscreen: function(elem) {
				  //if(elem.tagName == 'IMG') elem.width = 'auto'
					//console.log(elem)
				  window.screenfull.toggle(elem)
				}
			},
			computed: {
			}
		})

		//screenfull.onchange(function(e){
		//  if(e.target.tagName == 'IMG') {
		//	  if(screenfull.isFullscreen) e.target.removeAttribute('width')
		//		else e.target.setAttribute('width', 100);
		//	}
		//})

	</script>
</body>
</html>
